{layout "../Layout/layoutBoth.latte"}

{block tabs_content}
    {include "./tabs.latte"}
    {include "./tabs_two.latte"}
{/block}
{block private_css}
    <style>
        .actives{
            color:#0894ec !important;
        }

        .actives{
            color:#0894ec !important;
        }

        .icon-star{
            color:#FB855C;
        }

        .item-inner{
            height:6.6rem;
        }

        .item-inner > div{
            width:25%;
        }

        .img{
            position:relative;
        }

        .img > img{
            position:absolute;
            top:50%;
            margin-top:-24.5px;
        }

        .item-inner span{
            display:block;
            line-height:18px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

        .progress-bar{
            height:6px;
            background:#e4e4e4;
            border:1px solid #fb855c;
        }

        .progress-bar .after{
            height:6px;
            background:#fb855c
        }

        .searchbar{
            background-color:#f2f2f2 !important;
        }

        .tabs_two{
            position:absolute;
            top:3rem;
            height:3.2rem;
            width:100%;
            display:flex;
            justify-content:space-around;
            z-index:16;
            padding-top:.4rem;
            background:#f2f2f2;
        }

        .tabs_two a{
            display:block;border:1px solid #bbb;
            height:2.2rem;
            padding:0 1.8rem;
            line-height:2.2rem;
            color:#101010;
            border-radius:5px;
            background:#fff;
        }

        .tabs_two a.actives{
            border-color:#0087E2;
            color:#0087E2;
        }

        .list li{
            height:6.6rem;
            line-height:6.6rem;
        }

        .list-block{
            margin-top:4rem;
        }
    </style>
{/block}
{block private_js}
    <script>
        $(document).on("pageInit", function () {
            $(document).on('refresh', '.pull-to-refresh-content', function (e) {
                setTimeout(function () {

                    $.pullToRefreshDone('.pull-to-refresh-content');
                }, 2000);
            });

            $(document).on('infinite', '.infinite-scroll-bottom', function () {
                $('.infinite-scroll-preloader').remove();
                // $.refreshScroller(); //刷新滚动
            });
            $('.infinite-scroll-preloader').remove();
        })

    </script>
{/block}

{block content}
    <div class="tabs_two">
        <a href="{url('mobileConsoles_study_study')}" {if $tabs_two == 'study'} class="actives"{/if}>我的TODO</a>
        <a href="{url('mobileConsoles_study_release','tabs_two=release')}" {if $tabs_two == 'release'} class="actives"{/if}>我的发布</a>
        <a href="{url('mobileConsoles_study_judgement','tabs_two=judgement')}" {if $tabs_two == 'judgement'} class="actives"{/if}>我的审核</a>
    </div>
    <div class="list-block">
        <ul class="list">
            {foreach $lists as $k=>$item}
                <li>
                    <a class="item-content item-link" href="{url("mobileConsoles_study_allDetail",array("id"=>$item['s_id']))}">
                        <div class="item-inner">
                            <div class="img" style="width:23%">
                                <img src="{$cdnThumb.$item['s_icon']}" alt="" style="max-width:100%;height: 55px;vertical-align: bottom;">
                            </div>
                            <div class="name">
                                <span>{$item['s_names']}</span>
                                <span>{$item['recHtmlMemoH5']|noescape}</span>
                            </div>
                            <div class="memo" style="width:20%">
                                <span>积分</span>
                                <span>{$item['s_acorn']}</span>
                            </div>
                            <div class="src" style="line-height:28px;">
                                <div class="progress-bar">
                                    {if $item['sd_taskCount']>0}
                                        <p style="width:{$item['sd_taskCount']/$item['sd_totalCount']*100}%;" class="after"></p>
                                    {/if}
                                </div>
                                关联任务{$item['sd_taskCount']?:0}/{$item['sd_totalCount']}
                            </div>
                        </div>
                    </a>
                </li>
            {/foreach}
        </ul>
    </div>
{/block}